<template>
  <div class="pdf-viewer">
    <div class="pdf-container" ref="pdfContainer">
      <vue-pdf-embed
        :source="source"
        :page="currentPage"
        @loaded="onDocumentLoaded"
        @rendered="onPageRendered"
        :style="{ transform: `scale(${scale})` }"
      />
    </div>
    
    <div class="pdf-controls">
      <van-button 
        icon="minus"
        @click="zoomOut"
        :disabled="scale <= minScale"
      />
      <span class="scale-text">{{ Math.round(scale * 100) }}%</span>
      <van-button 
        icon="plus"
        @click="zoomIn"
        :disabled="scale >= maxScale"
      />
      <div class="page-controls">
        <van-button 
          icon="arrow-left"
          @click="prevPage"
          :disabled="currentPage <= 1"
        />
        <span class="page-text">{{ currentPage }} / {{ totalPages }}</span>
        <van-button 
          icon="arrow-right"
          @click="nextPage"
          :disabled="currentPage >= totalPages"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'

const props = defineProps({
  source: {
    type: [String, Object],
    required: true
  }
})

const currentPage = ref(1)
const totalPages = ref(1)
const scale = ref(1)
const minScale = 0.5
const maxScale = 3
const scaleStep = 0.2

const pdfContainer = ref(null)

const onDocumentLoaded = ({ numPages }) => {
  totalPages.value = numPages
}

const onPageRendered = () => {
  // 页面渲染完成后的处理
}

const zoomIn = () => {
  if (scale.value < maxScale) {
    scale.value = Math.min(maxScale, scale.value + scaleStep)
  }
}

const zoomOut = () => {
  if (scale.value > minScale) {
    scale.value = Math.max(minScale, scale.value - scaleStep)
  }
}

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

// 支持手势缩放
let initialDistance = 0
const handleTouchStart = (e) => {
  if (e.touches.length === 2) {
    initialDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    )
  }
}

const handleTouchMove = (e) => {
  if (e.touches.length === 2) {
    const currentDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    )
    
    const delta = currentDistance - initialDistance
    if (Math.abs(delta) > 10) {
      const newScale = scale.value + (delta > 0 ? scaleStep : -scaleStep)
      scale.value = Math.max(minScale, Math.min(maxScale, newScale))
      initialDistance = currentDistance
    }
  }
}

onMounted(() => {
  const container = pdfContainer.value
  if (container) {
    container.addEventListener('touchstart', handleTouchStart)
    container.addEventListener('touchmove', handleTouchMove)
  }
})

onUnmounted(() => {
  const container = pdfContainer.value
  if (container) {
    container.removeEventListener('touchstart', handleTouchStart)
    container.removeEventListener('touchmove', handleTouchMove)
  }
})
</script>

<style scoped>
.pdf-viewer {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.pdf-container {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  touch-action: none;
}

.pdf-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
}

.scale-text, .page-text {
  min-width: 60px;
  text-align: center;
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
}
</style> 